import React, { useState, useEffect, useRef } from 'react'

// console.log(React, 'React')

export default function View(props) {
  return (
    <div>
      <h1>view</h1>
      <Example />
      {/* <Test /> */}
      <TextInputWithFocusButton />
    </div>
  )
}

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// function Example() {
//   let [count, setCount] = useState(0)

//   return (
//     <div>
//       <p>You clicked {count} times</p>
//       <button onClick={() => setCount(count + 1)}>
//         Click me
//       </button>
//     </div>
//   )
// }

// function Test(props) {
//   let [num, setNum] = useState(1)
//   // function handleClick() {
//   //   console.log('click')
//   //   setNum(num + 1)
//   // }
//   let handleClick = () => {
//     setNum(num + 1)
//   }
//   return (
//     <div onClick={handleClick}>
//       num: {num}
//     </div>
//   )
// }
